// 注入 themeStyle 的css变量
// themeStyle 就是我们接下来要注入到 Page 和 Component 的 data 属性，
// 需要在页面和组件中设置的动态css变量属性，
// 即wxml 文件根节点设置style="{{themeStyle}}"，设置css变量值；wxss 文件通过css变量设置皮肤色值 var(--main-color, #0366d6);

const observer = require('../observer');
const themeModel = require('./themeModel');

module.exports = Behavior({
  data: {
    themeStyle: null,
    themeBaseColor: '#ffffff'
  },

  attached() {
    // 1. 如果接口响应过长，创建监听，回调函数中读取结果进行换肤
    observer.addNotice('kNoticeVi', function (res) {
      this.setThemeStyle(res)
    }.bind(this))

    // 2. 如果接口响应较快，modal有值，直接赋值，进行换肤
    const themeData = themeModel.get()
    if (themeData.themeBaseColor || themeData.subColor) {
      this.setThemeStyle(themeData)
    }
  },

  detached() {
    observer.removeNotice('kNoticeVi')
  },

  methods: {
    setThemeStyle({
      themeBaseColor,
      subColor
    }) {
      this.setData({
        themeBaseColor: themeBaseColor,
        themeStyle: `
          --themeBaseColor: ${themeBaseColor};
          --sub-color: ${subColor};
        `
      })
    },
  },
})